<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D文物详情页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/style2.css">
    <link rel="stylesheet" href="./css/des.css">
    <style>

        .desTitle {
            /*font-family: 'huaWen', serif;*/
            font-size: 1.8rem;
            font-weight: bold;
            width: 100%;
            text-align: center;
            line-height: 8.334vw;
            z-index: 1;
            position: relative;
            background: rgba(0, 0, 0, 0);
        }

        @media screen and (max-width: 1081px) {
            .desTitle {
                font-size: 3.5vw;
                bottom: 15rem;
                left: 0;
                position: absolute;
            }
        }

        @media screen and (max-width: 900px) {
            .desTitle {
                font-size: 1rem;
                bottom: 6rem;
            }
        }

        .logo {
            width: 25vw;
            height: 5vw;
            position: fixed;
            left: 5vw;
            top: 5vw;
            z-index: 1;
        }

        @media screen and (max-width: 1081px) {
            .logo {
                width: 50vw;
                height: 10vw;
                position: fixed;
                left: 3vw;
                top: 2vw;
            }
        }


        .nav_list {
            width: 5vw;
            text-align: center;
            position: fixed;
            left: 4vw;
            top: 28.333vh;
            z-index: 1;
        }

        @media screen and (max-width: 900px) {
            .nav_list {
                width: 3rem;
            }
        }

        @media screen and (max-width: 1081px) {
            .nav_list {
                width: 14vw;
                left: 3vw;
                top: 19vh;
            }
        }

        .nav_list .jieshao i {
            width: 4.5vw;
            height: 3.594vw;
            background: url(./img/icon_jieshao.png) no-repeat;
            background-size: contain;
        }

        .nav_list .jieshao.active i {
            background: url(./img/icon_jieshao_on.png) no-repeat;
            background-size: contain;
        }

        @media screen and (max-width: 1081px) {
            .nav_list .nav_item i {
                width: 11vw;
                height: 10.594vw;
            }
        }

        /*@media screen and (max-width: 1081px) {*/
        /*    .nav_list .nav_item.active i {*/
        /*        width: 11vw;*/
        /*        height: 10.594vw;*/
        /*    }*/
        /*}*/

        .nav_list i {
            display: block;
            margin: 0 auto;
        }

        .nav_list span {
            font-size: 1.042vw;
            font-family: 'huawen';
            font-weight: bolder;
            -webkit-font-smoothing: subpixel-antialiased;
            display: block;
        }

        @media screen and (max-width: 900px) {
            .nav_list span {
                font-size: 0.7rem;
                line-height: 1rem;
            }
        }

        @media screen and (max-width: 1081px) {
            .nav_list span {
                font-size: 3vw;
            }
        }

        #containRelics {
            position: fixed;
            top: 0
        }

        html, body, #containRelics {
            height: 100%;
            width: 100%;
        }

        .nav_bottom {
            position: fixed;
            bottom: 0;
            left: 14vw;
            width: 72vw;
            height: 8rem;
            display: flex;
            align-items: center;
        }

        @media screen and (max-width: 1081px) {
            .nav_bottom {
                bottom: 5vh;
                left: 10vw;
                width: 80vw;
            }
        }

        @media screen and (max-width: 900px) {
            .nav_bottom, .nav_bottom .swiper-slide, .nav_bottom .swiper-container {
                height: 6rem;
            }
        }

        @media screen and (max-width: 900px) {
            .nav_bottom {
                bottom: 0;
            }
        }

        .nav_bottom .img-container {
            width: 8rem;
            height: 8rem;
            margin: 0 auto;
            display: flex;
            align-items: center;
        }

        @media screen and (max-width: 1081px) {
            .nav_bottom .img-container {
                width: 3rem;
                height: 6rem;
                margin: 0 auto;
            }
        }

        .nav_bottom .img-container img {
            width: 60%;
            height: auto;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 0.25rem;
            overflow: hidden;
        }

        .btnTurnLeft {
            background: url(./img/left-arrow.png);
        }

        .btnTurnRight {
            background: url(./img/right-arrow.png);
        }

        .btnTurnLeft, .btnTurnRight {
            width: 1vw;
            height: 1vw;
            background-size: 100% 100%;
            z-index: 5;
            /* display: none; */
            margin-top: 2vw;
        }

        .btnTurnLeft:hover, .btnTurnRight:hover {
            cursor: pointer;
        }

        @media screen and (max-width: 1081px) {
            .btnTurnLeft, .btnTurnRight {
                width: 4vw;
                height: 4vw;
            }
        }

        .content {
            width: 26vw;
            height: 26vw;
            border-radius: 1vw;
            border: solid 1px #bfbfbf;
            position: absolute;
            left: 17.667vw;
            top: 20.5vh;
            display: none;
            overflow: hidden;
            padding: 1.25vw 0.885vw 1.25vw 1.5vw;
        }

        @media screen and (max-width: 1081px) {
            .content {
                width: 62vw;
                height: 54vh;
                left: 18vw;
                top: 18vh;
            }
        }

        @media screen and (max-width: 900px) {
            .content {
                width: 58vw;
                height: 48vh;
                left: 23vw;
                top: 18vh;
            }
        }

        .content p {
            font-size: 1rem;
            text-indent: 2rem;
        }

        @media screen and (max-width: 1081px) {
            .content p {
                font-size: 3vw;
                text-indent: 6vw;
            }
        }

        .nav_list .jieshao.active span, .nav_list .radio span, .nav_list .zhuanti.active span {
            color: #c2141c;
        }

        .layui-layer-btn {
            display: none;
        }

        .layui-layer-title {
            display: none;
        }

        .layui-layer {
            border-radius: 5px !important;
        }

        .swiper-container {
            height: 100%;
            position: absolute;
            right: 0;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;
            list-style: none;
            padding: 0;
            z-index: 1;
        }


        .topNav .btnRight {
            width: 1vw;
            height: 1vw;
            background: url(./img/swiperBtn.png);
            background-size: 100% 100%;
            position: absolute;
            bottom: -2vw;
            right: 1vw;
            z-index: 1;
            flex: 1;
            /* display: none; */
        }

        .topNav .btnLeft {
            width: 1vw;
            height: 1vw;
            background: url(./img/swiperBtn.png);
            background-size: 100% 100%;
            position: absolute;
            top: -2vw;
            right: 1vw;
            z-index: 1;
            flex: 1;
            margin: 0 auto;
            /* display: none; */
        }

        @media screen and (max-width: 1081px) {
            .topNav .btnLeft, .topNav .btnRight {
                width: 2vw;
                height: 2vw;
            }
        }

        @media screen and (max-width: 1081px) {
            .topNav .btnRight {
                bottom: -6vw;
            }
        }

        @media screen and (max-width: 900px) {
            .topNav .btnLeft, .topNav .btnRight {
                width: 3vw;
                height: 3vw;
            }
        }

        @media screen and (max-width: 900px) {
            .topNav .btnRight {
                bottom: -5vw;
            }
        }

        @media screen and (max-width: 900px) {
            .topNav .btnLeft {
                top: -5vw;
            }
        }

        @media screen and (max-width: 1081px) {
            .topNav .btnLeft {
                top: -6vw;
            }
        }


        .scale {
            transform: scale(2);
        }


        .topNav {
            min-width: 9vw;
            height: 20vw;
            position: fixed;
            top: 17vw;
            right: 3.6rem;
        }

        @media screen and (max-width: 1081px) {
            .topNav {
                top: 25vh;
                height: 40vw;
                right: 4vw;
            }
        }

        @media screen and (max-width: 900px) {
            .topNav {
                top: 23vh;
                height: 45vw;
            }
        }

        .nav .swiper-slide-active i {
            background: #333;
        }

        .nav .swiper-slide i {
            margin-right: 1vw;
        }


        .nav i {
            display: block;
            width: 0.99vw;
            height: 0.99vw;
            background: #333;
            border-radius: 50%;
        }

        @media screen and (max-width: 1081px) {
            .nav i {
                width: 2vw;
                height: 2vw;
            }
        }

        @media screen and (max-width: 900px) {
            .nav i {
                width: 3vw;
                height: 3vw;
            }
        }

        .nav .swiper-slide span {
            display: none;
            font-size: 2.042vw;
            white-space: nowrap;
        }

        .nav .swiper-slide {
            height: 3vw;
            margin: 0 auto;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        @media screen and (max-width: 1081px) {
            .nav .swiper-slide {
                height: 5vw;
            }
        }

        .swiper-slide {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            position: relative;
            transition-property: transform;
        }

        .nav .swiper-slide-active span {
            display: block;
        }

        .nav .swiper-slide a {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>

<!-- 文物标题 -->
<div class="desTitle"></div>

<!-- logo -->
<div class="logo"><a href="./home.html"><img
        src="./img/logo.png" alt=""></a></div>


<!--tab-->
<div class="nav_list">
    <div class="nav_item jieshao"><i></i><span>文物介绍</span></div>
</div>

<!--3d文物展示-->
<div id="containRelics">
    <iframe src="#"
            style="width: 100%;height:100%;" frameborder="0" id="Relics"></iframe>
</div>

<div class="topNav">
    <div class="btnRight"></div>
    <div class="swiper-container nav swiper-container-initialized swiper-container-vertical" id="nav">
        <div class="swiper-wrapper">
        </div>
    </div>
    <div class="btnLeft"></div>
</div>

<!--内部导航-->
<div class="nav_bottom">
    <div class="btnTurnLeft"></div>
    <div class="img-container" antique_id="61">
        <img src=""/>
    </div>
    <div class="btnTurnRight"></div>
</div>

<!-- 以下为弹框 -->

<!-- 文物介绍 -->
<div class="content" style="display: none;">
    <div class="description"><p>民国粉彩人物塑像，以粉彩为饰。塑像表情自然，眉清目秀，仪表堂堂。衣纹褶皱处理的自然逼真，采用粉彩绘上艳丽的色彩，做工精湛，瓷质白细，釉面润泽，造型规整。</p></div>
</div>


<!-- script ---------------------------------------------------------------------->

<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/swiper.min.js"></script>
<script src="./ajax/libs/layer/layer.min.js"></script>
<script src="./ajax/libs/layui/layui.js"></script>
<script src="./ruoyi/js/common.js?v=4.6.0"></script>
<script src="./ruoyi/js/ry-ui.js?v=4.6.0"></script>
<script>
  function getQueryVariable(variable) {
    const query = window.location.search.substring(1);
    const vars = query.split("&");
    for (let i = 0; i < vars.length; i++) {
      const pair = vars[i].split("=");
      if (pair[0] === variable) {
        return pair[1];
      }
    }
    return false;
  }

  let previousId, nextId

  $(function () {
    const id = getQueryVariable("id")
    if (id) {
      $.ajax({
        url: '/api/museum/exhibit/detail',
        method: 'post',
        data: {id: id},
        success(res) {
          console.log(res)
          $('.desTitle').html(res.name)
          $('#Relics').attr('src', res.url)
          $('.description p').html(res.remark)
          $('.img-container img').attr('src', res.img)
          const typeId = res.typeId

          $.ajax({
            url: '/api/museum/exhibit/previous',
            method: 'post',
            data: {id: id},
            success(res) {
              if (res.id) {
                previousId = res.id
              }
            }
          })

          $.ajax({
            url: '/api/museum/exhibit/next',
            method: 'post',
            data: {id: id},
            success(res) {
              if (res.id) {
                nextId = res.id
              }
            }
          })

        }
      })
    }

    let mySwiper1 = new Swiper('.swiper-container ', {
      direction: 'vertical',
      loop: true,
      slidesPerView: 'auto',
      centeredSlides: true,
      runCallbacksOnInit: false,
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
      slideToClickedSlide: true,
      // autoHeight: true, //高度随内容变化
      // allowTouchMove: false,
      on: {
        tap: function () {
          mySwiper1.slideTo(mySwiper1.clickedIndex)
        }
      }

    })
    let $swiper = $('.swiper-wrapper');
    $.ajax({
      url: '/api/museum/exhibit/listSimple',
      method: 'post',
      data: {},
      success: function (res) {
        let columnId = id;

        const rows = res
        const $wrapper = $swiper
        $wrapper.empty()
        rows.forEach((row, i) => {
          $wrapper.append(
            `<div class="swiper-slide" id="slide-${row.id}" data-swiper-slide-index="${i}">
              <a href="./detail.html?id=${row.id}">
                <i style="background:#C5C2C2;"></i>
                <span>${row.name}</span>
              </a>
            </div>`
          )
        })

        let $column = $('#slide-' + columnId + '');

        mySwiper1.slideTo(Number($column.attr("data-swiper-slide-index")), 1000, false)
        console.log(Number($column.attr("data-swiper-slide-index")));
      }
    })


    $('.btnRight').click(function () {
      mySwiper1.slideNext(500, true);
      $(this).addClass('scale').siblings().removeClass('scale');

    })
    $('.btnLeft').click(function () {
      mySwiper1.slidePrev(500, true);
      $(this).addClass('scale').siblings().removeClass('scale');

    })

    $swiper.on('mouseenter', '.swiper-slide', function () {
      $(this).find('span').show()
    })
    $swiper.on('mouseleave', '.swiper-slide', function () {
      if (!$(this).hasClass('swiper-slide-active')) {
        $(this).find('span').hide();
      }
    })
  })


  $('.btnTurnRight').click(function () {
    if (nextId) {
      window.location.href = './detail.html?id=' + nextId
    } else {
      $.modal.alertWarning('已经是最后一件文物了', 1500)
    }
  })

  $('.btnTurnLeft').click(function () {
    if (previousId) {
      window.location.href = './detail.html?id=' + previousId
    } else {
      $.modal.alertWarning('已经是第一件文物了', 1500)
    }
  })

</script>
<script>
  // 左侧tab

  // tab变红
  $('.nav_item').click(function () {
    if ($(this).hasClass("active")) {
      $(this).removeClass('active')
    } else {
      $(this).addClass("active").siblings().removeClass("active");
    }

  });

  // 获取屏幕宽度
  const vw = document.body.clientWidth;
  // 文物介绍按钮
  $('.jieshao').click(function () {
    if ($(this).hasClass('active')) {
      if (vw < 1081) {
        $('#containRelics').animate({
          left: '100vw'
        }, function () {
          $('.content').fadeToggle();
        });
      } else {
        $('#containRelics').animate({
          left: '15vw'
        }, function () {
          $('.content').fadeToggle();
        });
      }

    } else {
      $('.content ').fadeToggle(500, function () {
        $('#containRelics').animate({
          left: '0vw'
        });
      });
    }
  });
</script>
</body>
</html>